<template>
  <el-table :data="AllUser" style="width: 100%">
    <el-table-column prop="user_name" label="名称" width="100" />
    <el-table-column prop="phone_number" label="电话" width="150" />
    <el-table-column prop="password" label="密码" width="150"/>
    <el-table-column prop="learn_vocabulary" label="学习词本" width="200">
      <template #default="scope">
        <span v-if="scope.row.learn_vocabulary == 0">中小学词本</span>
        <span v-if="scope.row.learn_vocabulary == 1">考研词本</span>
        <span v-if="scope.row.learn_vocabulary == 2">高中词本</span>
        <span v-if="scope.row.learn_vocabulary == 3">四级词本</span>
        <span v-if="scope.row.learn_vocabulary == 4">六级词本</span>
      </template>
    </el-table-column>
    <el-table-column prop="role" label="角色" width="150">
      <template #default="scope">
        <span v-if="scope.row.role == 1">开发者</span>
        <span v-if="scope.row.role == 2">管理员</span>
        <span v-if="scope.row.role == 3">会员</span>
        <span v-if="scope.row.role == 4">普通用户</span>
      </template>
    </el-table-column>
    <el-table-column prop="online" label="在线状况" width="100">
      <template #default="scope">
        <span v-if="scope.row.online == 1">在线<span style="font-weight: bolder ;color: #0dff00">·</span></span>
        <span v-if="scope.row.online == 0">离线<span style="font-weight: bolder ;color: red">·</span></span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button type="primary"  circle @click="updMoudle(scope.row)" ><el-icon><Edit/></el-icon></el-button>
        <el-button type="danger"  circle @click="delUser(scope.row.user_id)" ><el-icon><Delete/></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="updDialog" style="height: 400px;width: 900px">
    <UpdUser :form-data="updForm" />
  </el-dialog>
</template>

<script>
import axios  from "axios";
import {ElMessage} from "element-plus";
import UpdUser from "@/components/User/updUser/index.vue";
export default {
  data(){
    return{
      updForm : null,
      updDialog : false,
      AllUser : []
    }
  },
  methods:{
    selectAllUser(){
      axios({
        method:"GET",
        url:("http://39.101.199.5:8888/SuJiWords/user/selAll"),
      }).then(
          response => (
              this.AllUser = response.data.data)
      )
      ElMessage.success("查询成功")
    },
    delUser(id){
      axios.delete('http://39.101.199.5:8888/SuJiWords/user/delUser/'+id,{
      }).then(response =>(ElMessage.success(response.data.msg)))
    },
    updMoudle(sc){
      this.updForm = sc
      this.updDialog = true
    }
  },components:{
    UpdUser
  },
  created() {
    this.selectAllUser()
  }
}


</script>

<style scoped>

</style>